<template>
  <div>
    <h2>=============== 我是HelloVuex ===============</h2>

    <div>
      <h3>moduleA中的name</h3>
      <p>{{ $store.state.moduleA.name }}</p>
      <button @click="updateName">改名</button>
    </div>

    <div>
      <h3>moduleA的fullName1、fullName2</h3>
      <p>{{ $store.getters.fullName1 }}</p>
      <p>{{ $store.getters.fullName2 }}</p>
      <button @click="timeUpdateName">延迟改名</button>
    </div>

    <div>
      <h3>info对象中的内容是否为响应式</h3>
      <p>{{ $store.state.info }}</p>
      <button @click="updateInfo">修改信息</button>
    </div>

    <div>
      <h3>vuex</h3>
      <p>{{ $store.state.counter }}</p>
    </div>
    <hr />

    <div>
      <h3>vuex counter平方</h3>
      <p>{{ $store.getters.powerCounter }}</p>
    </div>
    <hr />

    <div>
      <h3>年龄大于20学生</h3>
      <p>{{ $store.getters.more20stu }}</p>
    </div>
    <hr />

    <div>
      <h3>年龄大于20学生个数</h3>
      <p>{{ $store.getters.more20stuLength }}</p>
    </div>
    <hr />

    <div>
      <h3>年龄大于16学生</h3>
      <p>{{ $store.getters.moreAgeStu(16) }}</p>
    </div>

    <button @click="add">+</button>
    <button @click="sub">-</button>
    <button @click="addCount(5)">+5</button>
    <button @click="addCount(10)">+10</button>
    <button @click="addStu">添加一个学生</button>
    <hr />
  </div>
</template>

<script>
import { INCREMENT } from "../store/mutations-types";

export default {
  name: "HelloVuex",

  // 获取或组件传递数据
  props: {
    count: {
      type: Number,
      default: 0,
    },
  },

  computed: {
    // more20Student() {
    //   return this.$store.state.students.filter((s) => s.age > 20);
    // },
  },

  methods: {
    add() {
      this.$store.commit(INCREMENT);
    },

    sub() {
      this.$store.commit("decrement");
    },

    addCount(number) {
      // 第二个为给mutations传递的参数: 被称为是mutation的载荷(payload)
      this.$store.commit(INCREMENT, number);
    },

    addStu() {
      const stu = {
        id: 5,
        name: "Mr.shen",
        age: 90,
      };
      // this.$store.commit("addStudent", stu);

      // 2. 特殊的提交封装
      this.$store.commit({
        type: "addStudent",
        stu,
      });
    },

    updateInfo() {
      // dispatch: 这是到action的
      // 通过传递第二个参数来知道内部操作是否完成
      // this.$store.dispatch("aUpdateInfo", {
      //   name: "我是小陈",
      //   success: () => {
      //     console.log("内部异步操作已经完成");
      //   }
      // });
      // coderwhy老师说上面的代码不够优雅, 我们来尝试一下使之更优雅
      this.$store.dispatch("aUpdateInfo", "我是小陈").then((res) => {
        console.log(res);
      });
    },

    updateName() {
      // 使用方式与正常提交一致, 会先去最外层找, 找不到再去modules里面找
      this.$store.commit("updateName");
    },

    timeUpdateName() {
      this.$store.dispatch("aUpdateName");
    },
  },
};
</script>

<style scoped>
</style>